import React, { Component } from 'react';
import store from '../../store/index'
import actionCreators from '../../store/actionCreators'
import "./redux.css"
import Rdxzym from './redux子页面';
class rdxym extends Component {
  constructor(props) {
    super(props);
    // this.state = {  }
    this.state = {  }
  }
  componentDidMount(){
    // 监测redux中状态的变化，只要变化就调用render ----解决redux数据跟新页面不跟新问题  最好写在index.js页面中
    store.subscribe(() => {
      //从新刷新页面
      this.setState({})
    });
  }
  render() { 
    // 获取 redux store.getState()
    return ( 
      <div>
        <div>redux 页面</div>
        <ul className="rdxUl clearfix">
          <li>
            列表：{
              store.getState().list.map((item,index)=>{
                return <span key={index}>{item.title} --- {item.isFinished} &nbsp;&nbsp;&nbsp;&nbsp;</span>
              })
            }
          </li>
          <li>周几：{ store.getState().week }</li>
          <li>年龄：{ store.getState().age }</li>
          <li>{store.getState().name? `名字：${store.getState().name}`:'' }</li>
        </ul>
        <button onClick={this.addName}>添加名字</button>
        <button onClick={this.deleteDay}>删除这周几</button>
        <button onClick={this.addAge}>增加年龄</button>
        <Rdxzym></Rdxzym>
      </div>
    );
  }
  addName=()=>{
    actionCreators.changeData({name:'小明'})
  }
  addAge=()=>{
    let nl = store.getState().age + 1
    actionCreators.changeData({age:nl})
  }
  deleteDay=()=>{
    actionCreators.removeData('name')
  }
}
 
export default rdxym;